<template>
    <div class="label-wrapper">
        <div class="title">
            <span>标签</span>
            <el-icon
                color="#409eff"
                @click="edit"
                v-if="detailData && !detailData.enabled && checkPermi(['iot:device:edit'])"
                ><Edit
            /></el-icon>
        </div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
            </template>
            <template #default>
                <div v-if="detailData" class="label-box">
                    <el-tag v-for="item in detailData.labelNames" :key="item" style="margin-right: 5px">
                        {{ item }}
                    </el-tag>
                </div>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import { showPopupBox } from '@great/utils';
import { Edit } from '@element-plus/icons-vue';
import { checkPermi } from '@/utils/ruoyi';
import { runLabelService } from '@great/services';
import LabelModal from './LabelModal.vue';

const props = defineProps<{
    detailData?: Record<string, any>;
}>();
const initDetail = inject('initDetail');
const loading = ref(true);
const defaultProps = {
    children: 'childLabel',
    label: 'labelName',
    value: 'labelNo'
};
const labelTree = ref([]);
const labelChoice = ref<string[]>([]);
const edit = () => {
    showPopupBox(LabelModal, {
        labelChoice: labelChoice.value,
        labelTree: labelTree.value,
        // entityNo: props.detailData?.deviceNo,
        entityNo: props.detailData?.id,
        entityType: 'DEVICE',
        callBack: initDetail as () => Promise<void>
    });
};
// 获取标签
const getLabelTree = async () => {
    if (labelTree.value && labelTree.value.length > 0) return;
    const res = await runLabelService.getLabelTree({ labelTypeNo: 'labelType-deviceLabel' });
    labelTree.value = res.data;
};
// 初始化
const init = () => {
    getLabelTree();
};
init();

// 监听参数变化
watch(
    () => props.detailData,
    newValue => {
        if (newValue) {
            loading.value = false;
            labelChoice.value = newValue.labels;
        }
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.label-wrapper {
    margin-top: 15px;
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        > span {
            margin-right: 5px;
        }
        .el-icon {
            cursor: pointer;
        }
    }
    .label-box {
        min-height: 64px;
        :deep(.el-select) {
            .el-select__wrapper {
                box-shadow: none;
                background: transparent;
                cursor: default;
                .el-tag {
                    cursor: default;
                }
            }
        }
    }
}
</style>
